<template>
  <div class="box">
    <div class="gacha-setting-box">
      <p>抽卡设置</p>
      <div class="gacha-setting-content">
        <div class="gacha-setting-item">
          指挥官出现
          <el-switch v-model="settingData.withMale" active-color="#13ce66">
          </el-switch>
        </div>
        <div class="gacha-setting-item">
          开启R18
          <el-switch v-model="settingData.r18" active-color="#13ce66">
          </el-switch>
        </div>
        <div class="gacha-setting-item">
          选择角色
          <el-select v-model="settingData.characterSelect" placeholder="随机">
            <el-option v-for="item in characterSelecterData" :key="item.index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="gacha-button-box">
      <el-button @click="handleGachaOnce">一次</el-button>
      <el-button @click="handleGachaTenTimes">十连</el-button>
    </div>
    <div v-if="gachaResult">
      <p>抽卡结果</p>
      <div v-for="item, index in gachaResult" :key="item">
        <p>{{ gachaResult.length - index + ': ' + item }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElButton } from 'element-plus'
import { reactive } from 'vue'

const settingData = reactive({
  isR18: false,
  withMale: false,
  characterSelect: ''
})
const cardPoolData = reactive({
  qualityPrompt: [{ mandatory: ['masterpiece', 'best quality'], optional: [] }],
  // generalNegativePrompt: [{ mandatory: ['lowres', 'bad anatomy', 'bad hands', 'text', 'error', 'missing fingers', 'extra digit', 'fewer digits', 'cropped', 'worst quality', 'low quality', 'normal quality', 'jpeg artifacts', 'signature', 'watermark', 'username', 'blurry', 'bad feet'], optional: [] }],
  r18: [{ mandatory: ['nsfw'], optional: ['nude', 'complete nude', 'breast out', 'nipples', 'navel', 'pussy', 'vaginal', 'cum'] }],
  withMale: [{ mandatory: ['(1boy:1.2)', '(hetero:1.2)', '(sex:1.2)'], optional: ['(penis: 1.2)'] }],
  character: [
    { mandatory: [], optional: [], zhName: '甘雨' }
  ],
  posture: [
    { mandatory: ['doggystyle', '(sex_from_behind:1.2)', 'ass grab'], optional: [] },
    { mandatory: ['spread legs', 'leg grab', '(missionary:1.2)'], optional: ['lying'] },
    { mandatory: ['(paizuri:1.5)', 'large breasts', 'nipples', '(penis:1.4)', 'sex', 'breast grab', 'cum on breasts', 'breast press', 'leaning forward'], optional: ['lying'] }
  ],
  scene: [
    { mandatory: ['bed', 'bed sheet'], optional: ['pillow'] },
    { mandatory: ['hot spring'], optional: [] },
    { mandatory: ['outdoor'], optional: [] }
  ]
})
const characterSelecterData = reactive(cardPoolData.character.reduce((prev, cur, index) => {
  return prev.concat([{ label: cur.zhName, value: index.toString() }])
}, [{ label: '随机', value: '-1' }]))
const gachaResult = reactive([])

const randomIndex = (arr) => {
  return Math.floor(Math.random() * arr.length)
}
const randomSelectFromOptional = (arr) => {
  return arr.filter(() => { return Math.random - 0.5 })
}
const handleGachaOnce = () => {
  let result = []
  for (const key in cardPoolData) {
    if (key === 'r18') {
      if (settingData.isR18) {
        const index = randomIndex(cardPoolData[key])
        result = [...result, ...cardPoolData[key][index].mandatory, ...randomSelectFromOptional(cardPoolData[key][index].optional)]
      }
      continue
    }
    if (key === 'withMale') {
      if (settingData.withMale) {
        const index = randomIndex(cardPoolData[key])
        result = [...result, ...cardPoolData[key][index].mandatory, ...randomSelectFromOptional(cardPoolData[key][index].optional)]
      }
      continue
    }
    if (key === 'character') {
      const index = settingData.characterSelect === '' || settingData.characterSelect === '-1' ? randomIndex(cardPoolData[key]) : settingData.characterSelect
      result = [...result, ...cardPoolData[key][index].mandatory, ...randomSelectFromOptional(cardPoolData[key][index].optional)]
      continue
    }
    const index = randomIndex(cardPoolData[key])
    result = [...result, ...cardPoolData[key][index].mandatory, ...randomSelectFromOptional(cardPoolData[key][index].optional)]
  }
  console.log(result)
  gachaResult.unshift(result.join(', '))
}
const handleGachaTenTimes = () => {
  for (let i = 0; i < 10; i++) {
    handleGachaOnce()
  }
}
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.gacha-setting-box {
  width: 400px
}

.gacha-setting-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gacha-button-box {
  margin-top: 30px;
}
</style>
